<template>
  <div>
    <el-card>
      <el-table border :data="SkuArr" style="margin: 10px 0px">
        <el-table-column
          width="80px"
          label="序号"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          label="名称"
          show-overflow-tooltip
          prop="skuName"
        ></el-table-column>
        <el-table-column
          label="描述"
          show-overflow-tooltip
          prop="skuDesc"
        ></el-table-column>
        <el-table-column label="图片">
          <template #="{ row }">
            <img
              :src="row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column label="重量" prop="weight"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button
              :type="row.isSale == 0 ? 'primary' : 'warning'"
              size="small"
              :icon="row.isSale == 0 ? 'Top' : 'Bottom'"
              :title="row.isSale == 0 ? '上架商品' : '下架商品'"
              @click="changeSale(row)"
              v-has="`btn.Sku.updown`"
            ></el-button>
            <el-button
              type="success"
              size="small"
              icon="Edit"
              @click="toEdit"
              v-has="`btn.Sku.update`"
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="InfoFilled"
              @click="lookInfo(row)"
              v-has="`btn.Sku.detail`"
            ></el-button>

            <el-popconfirm
              :title="`你确定删除${row.skuName}`"
              @confirm="DeleteSku(row.id)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  v-has="`btn.Sku.remove`"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @current-change="HasSkuDataList"
        @size-change="handler"
      />
      <el-drawer v-model="drawer">
        <template #header>
          <h4>查看商品详细</h4>
        </template>
        <template #default>
          <el-row style="margin: 10px">
            <el-col :span="8">名称</el-col>
            <el-col :span="16">{{ SkuOneInfo.skuName }}</el-col>
          </el-row>
          <el-row style="margin: 10px">
            <el-col :span="8">描述</el-col>
            <el-col :span="16">{{ SkuOneInfo.skuDesc }}</el-col>
          </el-row>
          <el-row style="margin: 10px">
            <el-col :span="8">价格</el-col>
            <el-col :span="16">{{ SkuOneInfo.price }}</el-col>
          </el-row>
          <el-row style="margin: 10px">
            <el-col :span="8">平台属性</el-col>
            <el-col :span="16">
              <el-tag
                type="success"
                v-for="item in SkuOneInfo.skuAttrValueList"
                :key="item.id"
                style="margin: 5px"
                >{{ item.valueName }}</el-tag
              >
            </el-col>
          </el-row>
          <el-row style="margin: 10px">
            <el-col :span="8">销售属性</el-col>
            <el-col :span="16">
              <el-tag
                type="info"
                v-for="item in SkuOneInfo.skuSaleAttrValueList"
                :key="item.id"
                style="margin: 5px"
                >{{ item.saleAttrValueName }}</el-tag
              >
            </el-col>
          </el-row>
          <el-row style="margin: 10px">
            <el-col :span="24">商品图片</el-col>
          </el-row>
          <el-row style="margin: 10px 0px">
            <el-col :span="24">
              <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item
                  v-for="item in SkuOneInfo.skuImageList"
                  :key="item.id"
                >
                  <img
                    :src="item.imgUrl"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </template>
      </el-drawer>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
//引入接口
import {
  reqSkuList,
  reqOnSale,
  reqCancelSale,
  reqGetOneSku,
  reqDeleteSku,
} from "@/api/produck/sku";
//引入类型
import type { reqSkuDataList, SkuDate } from "@/api/produck/sku/type";
import { ElMessage } from "element-plus";
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let total = ref<number>(0);
//存放单独的sku信息
let SkuOneInfo = ref<any>({});
//控制抽屉的显示与隐藏
let drawer = ref<boolean>(false);
//接收返回的数据
let SkuArr = ref<SkuDate[]>([]);
//调用此方法将获取数据
const HasSkuDataList = async (page = 1) => {
  pageNo.value = page;
  let result: reqSkuDataList = await reqSkuList(pageNo.value, pageSize.value);
  total.value = result.data.total;
  SkuArr.value = result.data.records;
};
//每页展示多少条数据时的回调
const handler = (size: number) => {
  pageSize.value = size;
  HasSkuDataList();
};
//挂载时获取数据
onMounted(() => {
  HasSkuDataList();
});
//修改产品的上架与下架
const changeSale = async (row: SkuDate) => {
  //判断商品是否为上架或者下架状态(0为下架，1为上架)
  if (row.isSale == 0) {
    //调用上架接口
    let result = await reqOnSale(row.id as number);
    if (result.code == 200) {
      ElMessage({
        type: "success",
        message: "上架成功",
      });
      //再次获取数据
      HasSkuDataList(pageNo.value);
    } else {
      ElMessage({
        type: "error",
        message: "上架失败",
      });
    }
  } else {
    //调用下架接口
    let result = await reqCancelSale(row.id as number);
    if (result.code == 200) {
      ElMessage({
        type: "info",
        message: "下架成功",
      });
      //再次获取数据
      HasSkuDataList(pageNo.value);
    } else {
      ElMessage({
        type: "error",
        message: "下架失败",
      });
    }
  }
};
//修改按钮的回调
const toEdit = () => {
  ElMessage({
    type: "warning",
    message: "程序员还在加班研发中",
  });
};
//查看详细的按钮回调
const lookInfo = async (row: SkuDate) => {
  //显示抽屉
  drawer.value = true;
  //发送请求
  let result = await reqGetOneSku(row.id as number);
  if (result.code == 200) {
    SkuOneInfo.value = result.data;
  }
};
//删除sku的回调
const DeleteSku = async (id: number) => {
  let result = await reqDeleteSku(id);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    if (SkuArr.value.length < 1) {
      HasSkuDataList(pageNo.value - 1);
    } else {
      HasSkuDataList(pageNo.value);
    }
  } else {
    ElMessage({
      type: "error",
      message: "删除失败",
    });
  }
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
